<template>
	<view v-if="isEndLoad" class="contain">
		<view class="swiper_c">
			<swiper class="swiper" indicator-dots autoplay circular>
				<swiper-item class="top_swiper_item" v-for="item in skuList" :key="item.id">
					<image v-if="item.pic" class="swiper_image" :src="item.pic" mode="aspectFit"></image>
					<image v-else src="../../static/image/noImage.jpg" mode=""></image>
				</swiper-item>
			</swiper>
			<view class="collect_icon" @tap="collectClick">
				<image v-if="!isCollect" class="noCollect" src="../../static/image/collect_w.png" mode="widthFix"></image>
				<image v-else class="noCollect" src="../../static/image/collect_active.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="title_block">
			<view class="price_c">
				<view class="price_t">￥<text class="price_num">{{goodInfo.price}}.00</text></view>
				<view class="isHaveDis">
					<text>没有促销使用原价</text>
				</view>
			</view>
			<view class="good_name">
				<text>{{goodInfo.name}}</text>
			</view>
			<view class="good_desc">
				<text>{{goodInfo.description}}</text>
			</view>
		</view>
		<mp-html :content="goodInfo.detailMobileHtml" :tag-style="imgStyle" />
		<!-- <button @click="open">打开弹窗</button> -->

		<view class="footer">
			<image class="kf" src="../../static/image/kf.png" mode="heightFix"></image>
			<view class="btn_c">
				<button @click="open" type="default">添加到购物车</button>
				<button type="default">立即购买</button>
			</view>
		</view>
		<uni-popup ref="addShoppingCart" type="center" :animation='false'>
			<view class="add_shopping_cart_c">
				<!-- 商品头部 -->
				<view class="goods_info">
					<image class="goods_image" :src="willAddCartImg" mode="aspectFill"></image>
					<view class="good_name_num">
						<text>单人沙发</text>
						<text>库存数量：</text>
					</view>
					<image class="close_btn" @click="closePopup" src="../../static/image/x.png" mode="widthFix"></image>
				</view>
				<!-- 商品选择 -->
				<view class="goods_choice">
					<text class="title">商品选择</text>
					<view class="btn_c">
						<view @click="changewillAddCartIndex(index)" :class="['btn',{'active': index === willAddCartIndex}]" v-for="(item,index) in skuList"
						 :key="item.id">
							{{item.spData | goodMarque}}
						</view>
					</view>
				</view>
				<!-- 特色服务 -->

				<view class="special_service">
					<text class="title">特色服务</text>
					<view class="btn">
						送货上门
					</view>
					<view class="btn">
						上门安装
					</view>
				</view>
				<!-- 购买数量 -->
				<view class="get_num">
					<text class="title">购买数量</text>
					<view class="button_c">
						<view class="cal" @tap="cal(-1)">
							-
						</view>
						<view class="select_num">
							{{getNum}}
						</view>
						<view class="cal" @tap="cal(1)">
							+
						</view>
					</view>
				</view>
				<view class="sub">确定</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import request from "../../api/request.js";
	import mpHtml from '@/components/mp-html/mp-html'
	export default {
		data() {
			return {
				isEndLoad: false,
				goodId: '',
				goodInfo: null,
				imgStyle: {
					img: "display: block;width: 90%;height: auto; margin: auto",
					p: "padding: 0 30rpx; font-size: 24rpx"
				},
				isCollect: true,
				collectList: [],
				// 将要加入购物车的型号的序号
				willAddCartIndex: 0,
				// 将加入购物车的数量
				getNum: 1,
				skuList: []

			};
		},
		methods: {
			async initInfo() {
				const res = await request({
					url: `/product/productDetail/${this.goodId}`
				})
				this.goodInfo = res.data.data.product;
				console.log(res);
				// 动态设置头部
				uni.setNavigationBarTitle({
					title: this.goodInfo.brandName
				})
				// 初始化收藏在，获取到数据后；
				this.initCollectList();
			},
			// 初始化收藏
			initCollectList() {
				this.collectList = uni.getStorageSync('collectList').length ? uni.getStorageSync('collectList') : [];
				this.isCollect = this.collectList.findIndex(item => item.id = this.goodInfo.id) !== -1;

			},
			// 收藏按钮
			collectClick() {
				const goodIndex = this.collectList.findIndex((item) => item.id === this.goodInfo.id);
				// 存在删除收藏,不存在添加
				if (goodIndex == -1) {
					this.collectList.push(this.goodInfo);
				} else {
					this.collectList.splice(goodIndex, 1)
				}

				this.isCollect = !this.isCollect;
				uni.setStorageSync('collectList', this.collectList)
			},
			open() {
				// 通过组件定义的ref调用uni-popup方法
				this.$refs.addShoppingCart.open()
			},
			// 关闭弹出
			closePopup() {
				this.$refs.addShoppingCart.close()
			},
			// 改变当前选中的将要加入购物车的序号
			changewillAddCartIndex(index) {
				this.willAddCartIndex = index
			},
			// 添加数量的加减
			cal(n) {
				this.getNum = this.getNum + n > 0 ? this.getNum + n : 1
			}

		},
		filters: {
			goodMarque(val) {
				const goodMarque = JSON.parse(val);
				const goodMarqueInfo = goodMarque.map(item => {
					return `${item.key}:${item.value}`
				}).join(' ')

				return goodMarqueInfo
			}
		},
		onLoad(option) {
			this.goodId = option.id ? option.id : "1328966897597775874";
			this.initInfo();

		},
		components: {
			mpHtml,
		},
		computed: {
			willAddCartImg() {
				if (this.goodInfo) {
					if (this.goodInfo.skuList[this.willAddCartIndex]) {
						return this.goodInfo.skuList[this.willAddCartIndex].pic
					} else {
						return '../../static/image/noImage.jpg'
					}
				}
			}
		},
		watch: {
			goodInfo(n, v) {
				if (n) {
					this.isEndLoad = true;
					this.skuList = n.skuList;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "./goodsDetail.scss";
</style>
